﻿
<h1>Switch开关</h1>
<p>开关选择器。</p>


<DemoCard>
    <Title>基本使用</Title>
    <Description>
        @(@"最简单的用法。")
    </Description>
    <Demo>
        <AntSwitch Checked="switchValue"></AntSwitch>
    </Demo>
</DemoCard>

<DemoCard>
    <Title>不可用</Title>
    <Description>
        @(@"Switch 失效状态。")
    </Description>
    <Demo>
        <AntSwitch Checked="switchValue2" Disabled="isDisabled2"></AntSwitch>
        <br />
        <br />
        <AntButton Type="primary" @onclick="(_)=>isDisabled2 = !isDisabled2">Toggle disabled</AntButton>
    </Demo>
</DemoCard>



<DemoCard>
    <Title>文字和图标</Title>
    <Description>
        @(@"带有文字和图标。")
    </Description>
    <Demo>
        <AntSwitch Checked="true">
            <CheckedChildren>开</CheckedChildren>
            <UnCheckedChildren>关</UnCheckedChildren>
        </AntSwitch>
        <br />
        <AntSwitch Checked="false">
            <CheckedChildren>1</CheckedChildren>
            <UnCheckedChildren>0</UnCheckedChildren>
        </AntSwitch>
        <br />
        <AntSwitch Checked="true" CheckedChildren="checkedChildren" UnCheckedChildren="unCheckedChildren">
        </AntSwitch>
    </Demo>
</DemoCard>

<DemoCard>
    <Title>两种大小</Title>
    <Description>
        `size="small"`表示小号开关。
    </Description>
    <Demo>
        <AntSwitch Checked="true"></AntSwitch>
        <br />
        <AntSwitch Size="small" Checked="true"></AntSwitch>
    </Demo>
</DemoCard>

@code{
    bool switchValue = false;

    bool switchValue2 = false;
    bool isDisabled2 = true;

    RenderFragment checkedChildren = @<AntIcon Type="check"></AntIcon>;

    RenderFragment unCheckedChildren = @<AntIcon Type="close"></AntIcon>;

}
